<template>
    <div>
        <div class="img-base64" :class="theme()">
            <h3>输入验证码</h3>
            <div class="content">
                <div class="content-input">
                  <input class="input" type="text" v-model="data" @input="input">
                  <img class="status" :src="statusImg">
                </div>
                <img class="img" :src="imgSrc" @click="refresh">
            </div>
            <div class="button">
                <button @click="submit">确认</button>
            </div>
        </div>
    </div>
</template>

<script>
import yes from '@/assets/yes.svg'
import no from '@/assets/no.svg'
import theme from '@/mixins/theme.js'
export default {
    mixins: [theme],
    data(){
        return {
            statusImg:'',
            imgSrc:'',
            data:''
        }
    },
    methods:{
        refresh(){
            this.$ajax('getimg_base64', { "appid": this.$store.state.appid, "operation": this.$store.state.operation, "identifying": this.$store.state.identifying }, (res) => {
            this.imgSrc = 'data:image/png;base64,' + res.data.data;
        })
        },
        //输入事件
        input(){
          this.$ajax('check_virtual',{ "appid": this.$store.state.appid, "operation": this.$store.state.operation, 
          "type": "img_base64", "identifying": this.$store.state.identifying, "value": this.data }, (res) =>{
            if(res.data.data){
              this.statusImg=yes;
            }else{
              this.statusImg=no;
            }
          })
        },
        submit(){
            //保存验证值
            this.$store.dispatch('save_value',this.data);
            //返回index
            this.$router.push('/'+this.$store.state.appid+'/'+this.$store.state.operation+'/'+this.$store.state.theme);
        }
    },
    created(){
         if(!this.$store.state.validation){
           this.statusImg=no;
         }
         this.refresh();
    }
}
</script>

<style scoped>
    .theme1{
      background:rgba(88, 79, 96, 0.498039215686275);
    }
    .theme1 h3{
      color:#fff;
    }
    .theme1 input{
      border:none;
    }
    .theme1 button{
      color:#fff;
    }
    .img-base64{
        position:absolute;
        box-sizing:border-box;
        width:70%;
        padding:15px 0 40px 0;
        /*border:1px solid #ccc;*/
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius:10px;
    }
    .content{
        margin-top:20px;
        line-height:36px;
    }
    .content-input{
        position:relative;
    }
    .input{
        height: 25px;
        outline:none;
        border:1px solid #ccc;
        border-radius:5px;
    }
    .status{
      position:absolute;
      width:15px;
      top:10px;
      right:10px;
    }
    .img{
        position: relative;
        top:10px;
    }
    .button{
        margin-top:20px;
    }
    .button>button{
        border:1px solid #ccc;
        background: none;
        outline:none;
        width:100px;
        border-radius:5px;
        height:36px;
    }
</style>

